<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>layer-weui 2</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <style type="text/css">
        body {
            margin: 0 auto;
            max-width: 720px;
            padding: 0 10px;
            text-align: left;
        }

        .title{
            color: red;
            font-weight: bold;
            padding: 10px 0 0;
        }

        h1 {
            text-align: center;
            font-size: 18px;
        }

        h2 {
            font-size: 15px;
            font-weight: normal;
        }

        .wrapper {
            padding: 20px 0 0;
            line-height: 24px;
        }

        .tab {
            padding: 15px 0;
            border-bottom: 1px solid #999;
        }

        .tab:last-child {
            border-bottom: 0;
        }

        .param {
            word-break: break-all;
        }

        .action {
            padding: 10px 0 0;
        }

        .action button {
            padding: 5px 20px;
        }

        .select-ipt {
            position: relative;
            padding: 0 0 0 105px;
        }

        .select-ipt .tt {
            position: absolute;
            width: 105px;
            word-wrap: break-word;
            word-break: break-all;
            left: 0;
            top: 0;
        }

        .weui_input {
            width: 100%;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            background-color: transparent;
            height: 24px;
            line-height: 24px;
        }

        .pageAnimationScale {
            float: left;
            margin-right: 10px;
            width: 80px;

        }

        /*.weui-actionsheet-top-shade{*/
            /*opacity: .7 !important;*/
        /*}*/

        /*.weui-actionsheet-top{*/
            /*position: fixed!important;*/
            /*left: 0;*/
            /*top: 0;*/
            /*-webkit-transform: translateY(-100%);*/
            /*transform: translateY(-100%);*/
            /*-webkit-backface-visibility: hidden;*/
            /*backface-visibility: hidden;*/
            /*z-index: 5000;*/
            /*width: 100%;*/
            /*background-color: #fff;*/
            /*-webkit-transition: -webkit-transform .3s;*/
            /*transition: -webkit-transform .3s;*/
        /*}*/

        /*.weui-actionsheet-top-toggle{*/
            /*-webkit-transform: translateY(0);*/
            /*transform: translateY(0);*/
        /*}*/

        .weui-page-scale .page-scale .slide2 {
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform, -webkit-transform;
}

.weui-page-scale .page-scale .slide2 li {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

.weui-page-scale .page-scale .slide2 li .container {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
}

.weui-page-scale .page-scale .slide2 li .container img {
    max-width: 100%;
    margin-top: -30px;
}

        .slide {
            position: relative;
            z-index: 1;
        }

        .slide li {
            flex-shrink: 0;
            height: 74.666667vw;
            position: relative;
            transform: translate3d(0,0,0);
            z-index: 1;
        }

        .slide li .img {
            height: 100%;
            background-size: cover;
            background-position: center;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script src="module/layer.js"></script>
</head>
<body>
<div class="wrapper">
    <h1>layer-weui封装函数</h1>
    <p class="title">type:0弹窗,1:msg,2:loading,3:网页</p>
    <div class="tab">
        <h2>layer.open({})原生弹窗:</h2>
        <p>
            <span>anim：</span>
            <span class="param">scale,up,left,right</span>
        </p>
        <p class="action">
            <button class="layerOpen">纯文字</button>
            <button class="layerOpen1">有标题</button>
            <button class="layerOpen2">有按钮</button>
        </p>
        <p class="action">
            <button class="layerOpen3">up</button>
            <button class="layerOpen4">down</button>
            <button class="layerOpen5">left</button>
            <button class="layerOpen6">right</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerAlert(msg,title,callback):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p>
            <span>title：</span>
            <span class="param">提示框标题</span>
        </p>
        <p>
            <span>skin：</span>
            <span class="param">设置弹窗样式</span>
        </p>
        <p>
            <span>onOK：</span>
            <span class="param">点击回调函数</span>
        </p>
        <p class="action">
            <button class="layerAlert">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerConfirm(msg,title,callback):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p>
            <span>title：</span>
            <span class="param">提示框标题</span>
        </p>
        <p>
            <span>skin：</span>
            <span class="param">设置弹窗样式</span>
        </p>
        <p>
            <span>onOK：</span>
            <span class="param">确定按钮回调函数</span>
        </p>
        <p>
            <span>onCancel：</span>
            <span class="param">取消按钮回调函数</span>
        </p>
        <p class="action">
            <button class="layerConfirm">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerLoading(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action">
            <button class="layerLoading">数据加载中</button>
        </p>
        <p class="action">
            <button class="layerLoading2">数据加载中(type:2)</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerSuccess(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action">
            <button class="layerSuccess">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerDelete(msg):</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action">
            <button class="layerDelete">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerMsg():</h2>
        <p class="action">
            <button class="layerMsg">点击（scale）</button>
        </p>
        <p class="action">
            <button class="layerMsgFoot">点击（bottom）</button>
        </p>
    </div>
    <div class="tab">
        <h2>LayerAction():</h2>
        <p class="action">
            <button class="layerAction">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>layer-Select():</h2>
        <p>
            <span>msg：msg</span>
            <span class="param">提示内容</span>
        </p>
        <p class="action select-ipt">
            <input type="text" class="weui_input" name="zhiyi" readonly placeholder="请点击选择职业"/>
            <span class="tt">职业</span>
        </p>
        <p class="action select-ipt">
            <input type="text" class="weui_input" name="xuexiao" readonly placeholder="请点击选择职业"/>
            <span class="tt">学校</span>
        </p>
    </div>
    <div class="tab">
        <h2>popupUp():是由底部弹出的弹窗，弹出和隐藏带有缓动动画效果</h2>
        <p class="action">
            <button class="popupUp">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>popupDown():是由顶部弹出的弹窗，弹出和隐藏带有缓动动画效果</h2>
        <p class="action">
            <button class="popupDown">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>layer自带图标</h2>
        <div class="action">
            <i class="weui-icon-success"></i>
            <i class="weui-icon-waiting"></i>
            <i class="weui-icon-warn"></i>
            <i class="weui-icon-info"></i>
            <i class="weui-icon-success-circle"></i>
            <i class="weui-icon-success-no-circle"></i>
            <i class="weui-icon-checked"></i>
            <i class="weui-icon-checked-multi"></i>

            <i class="weui-icon-waiting-circle"></i>
            <i class="weui-icon-circle"></i>
            <i class="weui-icon-download"></i>
            <i class="weui-icon-info-circle"></i>
            <i class="weui-icon-safe-success"></i>
            <i class="weui-icon-safe-warn"></i>
            <i class="weui-icon-cancel"></i>
            <i class="weui-icon-search"></i>

            <i class="weui-icon-clear"></i>
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            <i class="weui-icon_msg"></i>
            <i class="weui-icon_msg weui-icon-warn"></i>
            <i class="weui-icon_msg-primary weui-icon-warn"></i>
            <P>图标2</P>
            <i class="weui-loading"></i>
            <i class="weui-icon-more"></i>
            <i class="weui-icon-btn_goback"></i>
            <i class="weui-icon-btn_close"></i>
        </div>
    </div>
    <div class="tab">
        <h2>由左向右边弹出</h2>
        <p class="action">
            <button class="pageAnimationLeft">点击</button>
        </p>
    </div>
    <div class="tab">
        <h2>由小放大，缩放页面</h2>
        <p class="action clearfix photo-browser">
            <span class="pageAnimationScale" data-url="images/1.jpg" data-index="0">
                <img src="images/1.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/2.jpg" data-index="1">
                <img src="images/2.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/3.jpg" data-index="2">
                <img src="images/3.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/8.jpg" data-index="3">
                <img src="images/8.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/pic.jpg" data-index="4">
                <img src="images/pic.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/10.jpg" data-index="5">
                <img src="images/10.jpg" width="100%"/>
            </span>
            <span class="pageAnimationScale" data-url="images/11.jpg" data-index="6">
                <img src="images/11.jpg" width="100%"/>
            </span>
        </p>
    </div>
    <div class="tab">
        <h2>弹出多图组成</h2>
        <p class="action">
            <button class="photo-layer">点击</button>
        </p>
    </div>
</div>
<script type="text/javascript">
    $('.layerOpen').on('click', function () {
        layer.open({
            zIndex:10,
            fixed:false,
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    $('.layerOpen1').on('click', function () {
        layer.open({
            title: [
                '温馨提示',
                'background-color: #F2F2F2;',
            ],
            content: '系统升级中，敬请期待！',
        })
    })

    $('.layerOpen2').on('click', function () {
        layer.open({
            content: '系统升级中，敬请期待！',
            btn: '知道了',
        })
    })

    $('.layerOpen3').on('click', function () {
        layer.open({
            anim:"up",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    $('.layerOpen4').on('click', function () {
        layer.open({
            anim:"down",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    $('.layerOpen5').on('click', function () {
        layer.open({
            anim:"left",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    $('.layerOpen6').on('click', function () {
        layer.open({
            anim:"right",
            content: '系统升级中，敬请期待！',
            className: 'weui',
        })
    })

    $('.layerAlert').on('click', function () {
        var title = '警告';
        var msg = 'AlphaGo 就是天网的前身，人类要完蛋了！';
        layer.alert({
            // title: title,
            msg: msg,
            onOK: function (i) {
                layer.close(i);
            }
        })
    });

    $('.layerConfirm').on('click', function () {
        var title = '确认删除？';
        var msg = '您确定要删除文件<<苍井空全集>>吗?';
        layer.confirm({
            msg: msg,
            title: title,
            btn: ['继续支付', '取消订单'],
            onOK: function () {
                layer.loading('正在登陆中');
            },
            onCancel: function () {
                alert(2);
            }
        });
    });

    $('.layerLoading').on('click', function () {
        layer.loading();
    });

    $('.layerLoading2').on('click', function () {
        layer.loading({
            skin:'t2',
        })
    });

    $('.layerSuccess').on('click', function () {
        //layerSuccess('已完成');
        layer.toast('操作成功');
    });

    $('.layerDelete').on('click', function () {
        layer.toast({
            'msg':'取消登录',
            'style':'error'
        });
    });

    $('input[name=zhiyi]').select({
        title: "选择职业",
        input: '法官',
        items: ["法官", "医生", "猎人", "学生", "记者", "其他"]
    });

    $('input[name=xuexiao]').select({
        title: "选择学校",
        multi: true,
        items: ["南昌大学", "财经大学", "江西师范大学", "航空大学", "江西理工学院", "其他"]
    });

    $('.layerMsg').on('click', function () {
        layer.msg({
            "msg":"111",
            "anim":"scale",
            "time":1000,
        });
    });

    $('.layerMsgFoot').on('click', function () {
        layer.msg({
            msg: '至少选择2',
            direct: 'bottom',
        });
    });

    $('.layerAction').on('click', function () {
        layer.actions({
            actions: [{
                text: "编辑",
                onClick: function () {
                    //layer.loading();
                    layer.toast('操作成功', function () {
                        layer.closeAll();
                    })
                }
            }, {
                text: "删除",
                style: 'color:red;',
                onClick: function () {
                    //do something
                }
            }]
        });
    });

    $(".popupUp").on("click", function () {
        var html = "<div>";
        html+='<div>我是底部弹出框效果</div>'
        html+='<div>我是底部弹出框效果</div>'
        html+='<div>我是底部弹出框效果</div>'
        html+='</div>'
        layer.popupUp({
            content: html
        });
    })

    $(".popupDown").on("click", function () {
        var html = "<div>";
        html+='<div>我是顶部弹出框效果</div>'
        html+='<div>我是顶部弹出框效果</div>'
        html+='<div>我是顶部弹出框效果</div>'
        html+='</div>'
        layer.popupDown({
            content: html
        });
    })

    $(".pageAnimationLeft").on("click", function () {
        var html = '<div class="page-left">';
        html += '<P class="close">点击关闭</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '<P>我是弹出框效果我是弹出框效果我是弹出框效果</P>';
        html += '</div>';
        layer.popupUp({
            anim: 'weui-page',
            content: html,
            success: function () {
                $('.page-left .close').on('click', function () {
                    layer.closeAll();
                })
            }
        });
    })

    $(".pageAnimationScale").on("click", function () {
        //弹出左滑动和幻灯片左滑动效果造成的
        var _self = $(this);
        var imgAll = [];
        _self.parents().find('.pageAnimationScale').each(function () {
            imgAll.push($(this).attr('data-url'));
        })
        var initIndex = _self.attr('data-index');
        var initImg = _self.attr('data-url');

        layer.photoBrowser({
            initIndex: initIndex,
            initImg: initImg,
            items: imgAll,
            itemsWrap: '.photo-browser',
            itemSelector: '.pageAnimationScale',
        })
    })

    $('.photo-layer').on('click', function () {
        layer.photoLayer({
            shade:'background-color: rgba(0,0,0,1)',
            shadeClose: false,
            items: [
                {
                    'img':'images/tip_01.png',
                },
                {
                    'img':'images/tip_02.png',
                },
                {
                    'img':'images/tip_03.png',
                    'className':'close',
                    'link':'http://www.baidu.com',
                },
                {
                    'img':'images/tip_04.png',
                },
                {
                    'img':'images/tip_05.png',
                },
            ],
            success: function () {

            }
        })
    })
</script>
</body>
</html>
